<template>
  <view class="x-empty">
    <view class="_body">
      <view class="_pic">
        <x-image mode="widthFix" :src="pic" />
      </view>
      <view class="_content">
        {{content}}
      </view>
      <view v-if="button" class="_button">
        <x-button round @click="onSwitchTab">去逛逛</x-button>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XButton from '@/components/x-button';

export default {
  name: 'XEmpty',
  components: {
    XImage,
    XButton
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    src: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: '暂无相关数据~'
    },
    button: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      typeList: {
        default: '/assets/images/no-collection-goods.png',
        order: '/assets/images/no-order.png',
        goods: '/assets/images/off-shelf-goods.png'
      }
    };
  },
  computed: {
    pic() {
      return this.src ? this.src : this.typeList[this.type];
    }
  },
  watch: {},
  created() {

  },
  methods: {
    onSwitchTab() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="less">
  .x-empty{
    text-align: center; height: 100%; position: relative;
    ._body{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);}
    ._pic{ width: 160px; margin: 0 auto;}
    ._content{ color: #646464; font-size: 32px;margin-top: 32px;}
    ._button{ padding-top: 50px;width: 172px;margin: 0 auto}
  }
</style>
